<template>
  <div class="all">
    <div class="focus">
      <div class="focus_top cl">
        <!--头部-->
        <div class="tit_left fl">
          <h2>焦点赛事</h2>
        </div>
        <ul class="tit_center fl">
          <li
            v-for="el in titList"
            :key="el.id"
            :class="{bottom_color:el.id===titStatus}"
            @mouseenter="tieEnter(el.id)"
          >
            {{el.tit}}
            <div class="bottom_border" v-if="el.id===titStatus"></div>
          </li>
        </ul>
        <div class="tit_right fr">
          <a href="JavaScript:void(0)">2019全球总决赛</a>
          <div class="tit_right_img" @mouseenter="dongImg" @mouseleave="tingImg"></div>
        </div>
      </div>
    </div>
    <ul class="list_js">
      <li id="list_left"></li>
      <li id="list_center"></li>
      <li id="list_right"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data: () => ({
    titList: [
      {
        id: 0,
        tit: '入围赛'
      },
      {
        id: 1,
        tit: '小组赛'
      },
      {
        id: 2,
        tit: '淘汰赛'
      }
    ],
    titStatus: 0,
    dongimg: true,
    setin: null
  }),
  created () {},
  methods: {
    tieEnter (id) {
      this.titStatus = id
      var listJs = document.getElementsByClassName('list_js')[0]
      for (var i = 0; i < listJs.children.length; i++) {
        listJs.children[i].className = ''
      }
      listJs.children[id].className = 'zIndex'
    },
    dongImg () {
      var Img = document.getElementsByClassName('tit_right_img')[0]

      this.setin = setInterval(function () {
        if (this.dongimg) {
          Img.style.left = 162 + 'px'
          this.dongimg = !this.dongimg
        } else {
          Img.style.left = 158 + 'px'
          this.dongimg = !this.dongimg
        }
      }, 100)
    },
    tingImg () {
      clearInterval(this.setin)
    }
  }
}
</script>
<style lang="less" scoped>
.all {
  width: 100%;
  background: #eee;
  .focus {
    width: 1360px;
    margin: auto;
    line-height: 35px;
    border-bottom: 1px solid #ccc;
    padding-top: 60px;
    .focus_top {
      overflow: inherit;
      height: 45px;
      .tit_left {
        h2 {
          padding-left: 10px;
          border-left: solid #1da6ba 5px;
        }
      }
      .tit_center {
        .bottom_color {
          color: #1da6ba !important;
        }
        li {
          float: left;
          margin: 0px 33px;
          position: relative;
          font-weight: bold;
          cursor: pointer;
          .bottom_border {
            position: absolute;
            top: 31px;
            left: -5px;
            height: 10px;
            width: 60px;
            background: url("../../images/comm1901.png");
            background-position: -181px 0;
            z-index: 10;
          }
        }
      }
      .tit_right {
        position: relative;
        margin-right: 100px;
        .tit_right_img {
          position: absolute;
          left: 160px;
          top: 0px;
          width: 15px;
           height: 9px;
          background-image: url("../../images/comm1901.png");
          background-position: -128px -12px;
          background-size: 312px 54px;
          background-repeat: no-repeat;
          margin-top: 12px;
          cursor:pointer
        }
      }
    }
  }
  .list_js {
    width: 1360px;
    margin: auto;
    position: relative;
    height: 550px;
    li {
      position: absolute;
      height: 550px;
      width: 100%;
    }
    .zIndex {
      z-index: 100 !important;
    }
    #list_left {
        background: url("../../images/bg1.png");
          background-size:100% 100%;
      z-index: 1;
    }
    #list_center {
      background: #ff0;
      background: url("../../images/bg2.png");
          background-size:100% 100%;
    }
    #list_right {
      background: #0ff;
      background: url("../../images/bg3.png");
          background-size:100% 100%;
    }
  }
}
</style>
